<!--
 * @Author: your name
 * @Date: 2020-10-23 14:24:10
 * @LastEditTime: 2020-10-23 14:45:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit面包屑导航
 * @FilePath: \longh_web\src\components\breadcrumbNav\breadcrumbNav.vue
-->
<!--  -->
<template>
  <div>
    <div>
      <div class="nav-box">
        <a-breadcrumb separator=">" class="nav-text">
          <a-breadcrumb-item class="breadcrumb">
            <a href="javascript:void(0);" @click="JumpUrl('/home')">首页</a>
          </a-breadcrumb-item>
          <a-breadcrumb-item class="breadcrumb">
            <a href="javascript:void(0);" @click="JumpUrl(SecondcrumbsUrl)">{{ SecondcrumbsTitle }}</a>
          </a-breadcrumb-item>
          <a-breadcrumb-item class="breadcrumb"><a href="javascript:void(0);" class="nav-Detail">{{ ThreecrumbsTitle
              }}</a></a-breadcrumb-item>
        </a-breadcrumb>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {};
  },
  props: {
    SecondcrumbsUrl: {
      type: String, ///type: [String, Number],
      default: "/ProductProvide",
    },
    ThreecrumbsTitle: {
      type: String, ///type: [String, Number],
      default: "详情",
    },
    SecondcrumbsTitle: {
      type: String, ///type: [String, Number],
      default: "产品供应",
    },
  },
  components: {},

  computed: {},

  mounted () { },

  methods: {
    JumpUrl (url) {
      this.$router.push(url);
    },
  },
  created () { },
};
</script>
<style lang='less' scoped>
.nav-box {
  .breadcrumb {
    cursor: pointer;
  }

  margin: 24px 0;
  height: 56px;
  background-color: #ffffff;
  box-shadow: 0px 6px 20px 0px rgba(24, 138, 241, 0.16);
  border-radius: 6px;

  .nav-text {
    line-height: 56px;
    margin-left: 29px;
    font-size: @font16;
    font-weight: normal;
    color: @text-color-606;

    .nav-Detail {
      color: @color-188;
    }
  }
}
</style>